<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>头部栅格系统</title>
    <!--视口                             屏幕的宽是设备的宽                                            不让缩放-->
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <!--<meta http-equiv="X-UA-COMPATIBLE" content="IE=edge">让ie支持新技术-->
    <link rel="stylesheet" type="text/css" href="bootstrap.min.css">
    <style>
        .col-lg-3{
            border:1px solid red;
        }
    </style>
</head>
<body>
    <div class="container"><!--div class="container"   是固定布局 居中-->
                             <!--div class="container-fluid"   是流式布局  占满屏-->
        <div class="row">
            <div class="col-lg-3 col-sm-4 col-xs-6">
                col-lg-3 是pc屏幕>=1200    col-sm-4是平板 768px-992px  col-xs-6手机是小于768px
                您好这是学习bootstrap的第1天
            </div>
            <div class="col-lg-3 col-sm-4 col-xs-6">
                col-lg-3 是pc屏幕>=1200    col-sm-4是平板 768px-992px  col-xs-6手机是小于768px
                您好这是学习bootstrap的第1天
            </div>
            <div class="col-lg-3 col-sm-4 col-xs-6 bg-primary"><!--bg是背景色 -->
                col-lg-3 是pc屏幕>=1200    col-sm-4是平板 768px-992px  col-xs-6手机是小于768px
                您好这是学习bootstrap的第1天
            </div>
            <div class="col-lg-3 col-sm-4 col-xs-6 text-danger"><!--text是文字颜色-->
                col-lg-3 是pc屏幕>=1200    col-sm-4是平板 768px-992px  col-xs-6手机是小于768px
                您好这是学习bootstrap的第1天
            </div>
            <botton class="close"><sapn>&times;</sapn></botton><!--  close &times;  关闭按钮-->
            <sapn class="caret"></sapn> <!--  caret 三角型-->
            <div style="border:1px solid red" class="clearfix"><!--  clearfix 清除浮动-->
                <div class="pull-left">pull-left</div>
                <div class="pull-right"> pull-right<div>
            </div>
        </div>
    </div>
</body>
</html>